<template>
  <div class="upload-area">
    <el-upload
      ref="uploadRef"
      class="upload-dragger"
      drag
      :multiple="true"
      :auto-upload="false"
      :show-file-list="false"
      :accept="acceptedTypes"
      :before-upload="handleBeforeUpload"
      :on-change="handleFileChange"
      :disabled="disabled"
    >
      <div class="upload-content">
        <el-icon class="upload-icon">
          <UploadFilled />
        </el-icon>
        <div class="upload-text">
          <p class="upload-title">点击或拖拽文件到此区域上传</p>
          <p class="upload-hint">支持 JPG、PNG、GIF、WebP 格式，单个文件不超过 10MB</p>
        </div>
      </div>
    </el-upload>
    
    <!-- 文件选择按钮 -->
    <div class="upload-actions">
      <el-button 
        type="primary" 
        size="large"
        :disabled="disabled"
        @click="triggerFileSelect"
      >
        <el-icon><FolderOpened /></el-icon>
        选择文件
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled, FolderOpened } from '@element-plus/icons-vue'
import type { UploadFile, UploadFiles } from 'element-plus'

// Props
interface Props {
  disabled?: boolean
  maxSize?: number // MB
  acceptedTypes?: string
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  maxSize: 10,
  acceptedTypes: 'image/jpeg,image/jpg,image/png,image/gif,image/webp'
})

// Emits
const emit = defineEmits<{
  select: [files: File[]]
}>()

// Refs
const uploadRef = ref()

// Methods
const handleBeforeUpload = (file: File) => {
  // 检查文件类型
  const isValidType = props.acceptedTypes.split(',').some(type => 
    file.type === type.trim()
  )
  
  if (!isValidType) {
    ElMessage.error('不支持的文件格式！请选择 JPG、PNG、GIF 或 WebP 格式的图片')
    return false
  }
  
  // 检查文件大小
  const isValidSize = file.size / 1024 / 1024 < props.maxSize
  if (!isValidSize) {
    ElMessage.error(`文件大小不能超过 ${props.maxSize}MB！`)
    return false
  }
  
  return true
}

const handleFileChange = (file: UploadFile, fileList: UploadFiles) => {
  // 获取新添加的文件
  const validFiles: File[] = []
  
  fileList.forEach(uploadFile => {
    if (uploadFile.raw && handleBeforeUpload(uploadFile.raw)) {
      validFiles.push(uploadFile.raw)
    }
  })
  
  if (validFiles.length > 0) {
    emit('select', validFiles)
  }
  
  // 清空文件列表，避免重复上传
  uploadRef.value?.clearFiles()
}

const triggerFileSelect = () => {
  uploadRef.value?.$el.querySelector('input[type="file"]')?.click()
}
</script>

<style scoped>
.upload-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.upload-dragger {
  width: 100%;
  max-width: 600px;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 200px;
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-upload-dragger:hover) {
  border-color: #409eff;
  background: rgba(255, 255, 255, 0.95);
}

:deep(.el-upload-dragger.is-dragover) {
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.upload-content {
  text-align: center;
  padding: 20px;
}

.upload-icon {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

.upload-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.upload-hint {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.upload-actions {
  display: flex;
  gap: 12px;
}

:deep(.el-button--large) {
  padding: 12px 24px;
  font-size: 16px;
}

/* 禁用状态样式 */
:deep(.el-upload.is-disabled .el-upload-dragger) {
  background: #f5f5f5;
  border-color: #e4e7ed;
  cursor: not-allowed;
}

:deep(.el-upload.is-disabled .upload-icon) {
  color: #c0c4cc;
}

:deep(.el-upload.is-disabled .upload-title) {
  color: #c0c4cc;
}

:deep(.el-upload.is-disabled .upload-hint) {
  color: #c0c4cc;
}

@media (max-width: 768px) {
  .upload-dragger {
    max-width: 100%;
  }
  
  :deep(.el-upload-dragger) {
    height: 160px;
  }
  
  .upload-content {
    padding: 15px;
  }
  
  .upload-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }
  
  .upload-title {
    font-size: 14px;
  }
  
  .upload-hint {
    font-size: 12px;
  }
}
</style>